<template>
    <div class="app">
        <div class="teacher_page">
            <div class="header">
                <header>
          <span class="back">
            <span class="iconfont icon-iconfontjiantou1" @click="back"></span>
          </span>
                    <h3>讲师详情</h3>
                </header>
            </div>
            <div class="teacher_info">
                <!-- {{teacherDetailImgItem}} -->
                <div class="ti_base">
                    <img :src="teacherDetailImgItem.avatar"/>
                    <div>
                        <p>
                            <span>{{teacherDetailImgItem.teacher_name}}</span>
                            <font>{{teacherDetailImgItem.level_name}}</font>
                        </p>
                        <p>
                            男
                            <font>{{teacherDetailImgItem.teach_age}}年教龄</font>
                        </p>
                    </div>
                    <button @click="onClickFollow" :class="{'teacherFlag':teacherFlag===1}">{{teacherFlag | flag}}
                    </button>
                </div>
                <div class="ti_label">
                    <div v-for="(item,index) in teacherDetailImgItem.tag_content" :key="index">
                        <span>{{item}}</span>
                    </div>
                </div>
            </div>
            <div class="com_box">
                <van-tabs v-model="activeName">
                    <van-tab title="讲师介绍" name="a">
                        <div class="pane">
                            <ul class="teacher_tro">
                                <li>
                                    <span>{{teacherDetailItem.aa}}</span>
                                    <font>{{teacherDetailItem.bb}}</font>
                                </li>
                                <li>
                                    <span>{{teacherDetailItem.cc}}</span>
                                    <font>{{teacherDetailItem.dd}}</font>
                                </li>
                                <li>
                                    <span>老师简介</span>
                                    <font>{{teacherDetailItem.intro}}</font>
                                </li>
                            </ul>
                        </div>
                    </van-tab>
                    <van-tab title="主讲课程" name="b">
                        <!-- {{teacherDetailClassItem}} -->
                        <Excellent
                                v-for="(item,index) in teacherDetailClassItem"
                                :key="index"
                                class="list1"
                                :text="item.title"
                                :people="item.sales_num"
                                :periods="item.total_periods"
                                :name="item.teachers_list[0].teacher_name"
                                :img="item.teachers_list.teacher_avatar"
                                :price="item.price"
                                :date="[0,0]"
                        ></Excellent>
                    </van-tab>
                    <van-tab title="学员评价" name="c">
                        <div class="tracher_evaluate">
                            <van-collapse v-model="activeNames" v-if="teacherDetailEvaluate2.length!==0">
                                <van-collapse-item name="1">
                                    <template #title>
                                        <!-- <div> -->
                                        <ul class="tracher_evaluate_uu">
                                            <li
                                                    v-for="(item,index) in teacherDetailEvaluate2"
                                                    :key="index"
                                                    v-if="index<3"
                                            >
                                                <span>{{item.title}}({{item.count}})</span>
                                            </li>
                                        </ul>
                                        <!-- </div> -->
                                    </template>
                                    <ul class="tracher_evaluate_uu2">
                                        <li
                                                v-for="(item,index) in teacherDetailEvaluate2"
                                                :key="index"
                                                v-if="index>=3"
                                        >
                                            <span>{{item.title}}({{item.count}})</span>
                                        </li>
                                    </ul>
                                </van-collapse-item>
                            </van-collapse>
                            <Teacher
                                    v-if="teacherDetailEvaluate.length!==0"
                                    :img="teacherDetailEvaluate[0].avatar"
                                    :value="teacherDetailEvaluate[0].grade"
                                    :title="teacherDetailEvaluate[0].tag_content"
                                    :text="teacherDetailEvaluate[0].content"
                            ></Teacher>
                            <div v-if="teacherDetailEvaluate.length===0" class="dv1">
                                <img src="../../../public/img/empty.0d284c2e.png"/>
                                <p>暂无数据</p>
                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
            <div class="course_btn" @click="onClickOrder(teacherDetailImgItem.id)">
                <span>立即预约</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from "vant";
    import Excellent from "../../components/home/Excellent";
    import Teacher from "../../components/home/Teacher";

    export default {
        name: 'Teach',
        data() {
            return {
                activeName: "a",
                activeNames: ["0"],
                id: '',
            };
        },
        components: {
            Excellent,
            Teacher,
        },
        computed: {
            // 讲师的详情页 内容
            teacherDetailItem() {
                return this.$store.state.teacher.teacherDetailItem;
            },
            // 讲师的详情页 头像
            teacherDetailImgItem() {
                return this.$store.state.teacher.teacherDetailImgItem;
            },
            // 讲师是否被关注
            teacherFlag() {
                console.log('ba::', this.$store.state.teacher.flag)
                return this.$store.state.teacher.flag;
            },
            // 讲师的详情页 主讲课程
            teacherDetailClassItem() {
                return this.$store.state.teacher.teacherDetailClassItem;
            },
            // 讲师的详情页  学员评价
            teacherDetailEvaluate() {
                return this.$store.state.teacher.teacherDetailEvaluate;
            },
            teacherDetailEvaluate2() {
                return this.$store.state.teacher.teacherDetailEvaluate2;
            },
        },
        mounted() {
            let id = this.$route.query.id;
            this.id = id

            this.$store.dispatch("teacherDetailImg", id); // 讲师的详情页 头像
            this.$store.dispatch("teacherDetail", id); // 讲师的详情页 内容
            this.$store.dispatch("teacherDetailClass", id); // 讲师的详情页 主讲课程
            this.$store.dispatch("teacherComment", id); // 讲师的详情页  学员评价
        },
        methods: {
            // 返回按钮
            back() {
                window.history.back();
            },
            // 点击关注
            onClickFollow() {
                this.$store.dispatch("teacherFollow", this.id); // 讲师的详情页  关注取关

                this.follow = "已关注";

                Toast.success("已关注");

            },
            // 点击我的预约
            onClickOrder(ids) {
                this.$router.push({
                    path: "/order",
                    query: {
                        id: ids,
                    },
                });
            }
        },
        filters: {
            flag(value) {
                console.log(value)
                return value === 2 ? "关注" : "已关注"
            }
        }
    };
</script>

<style scoped lang="scss">
    .teacher_page {
        min-height: 100vh;
        background: #f0f2f5;
        padding-bottom: 16vw;
        box-sizing: border-box;

        .header {
            height: 26.66667vw;
            line-height: 11.73333vw;
            background: linear-gradient(180deg, #63b7fe, #4e7de3);

            header {
                height: 11.73333vw;
                width: 100%;
                padding-right: 6.66667vw;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;

                .back {
                    width: 6.66667vw;
                    height: 100%;
                    padding-left: 2.66667vw;

                    span {
                        color: #fff;
                        font-size: 40px;
                    }
                }

                h3 {
                    flex: 2;
                    text-align: center;
                    font-size: 4.8vw;
                    color: #fff;
                    // background: hsl(0,100%,50%);
                }
            }
        }
    }

    .teacher_info {
        margin: -15.2vw auto 0;
        width: 94.66667vw;
        padding: 0 4vw;
        background: #fff;
        border-radius: 1.06667vw;
        box-sizing: border-box;

        .ti_base {
            height: 20.26667vw;
            display: flex;
            align-items: center;

            img {
                width: 10.66667vw;
                height: 10.66667vw;
                margin-right: 3.2vw;
                border-radius: 50%;
                flex: none;
            }

            div {
                flex: 1;

                p:nth-child(1) {
                    padding-bottom: 0.8vw;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;

                    span {
                        font-size: 4vw;
                        color: #595959;
                        line-height: 5.6vw;
                        padding-right: 1.33333vw;
                    }

                    font {
                        font-size: 2.93333vw;
                        color: #ea7a2f;
                    }
                }

                p:nth-child(2) {
                    font-size: 3.2vw;
                    color: #b7b7b7;
                    line-height: 4.53333vw;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;

                    font {
                        font-size: 3.2vw;
                        color: #b7b7b7;
                        line-height: 4.53333vw;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                    }
                }
            }

            button {
                width: 16.53333vw;
                height: 7.46667vw;
                background: #ebeefe;
                border-radius: 4.13333vw;
                font-size: 3.46667vw;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: #4169ff;
                color: #eb6100;
                border: 0;
                
                
                &.teacherFlag{
                    background-color: #fff;
                    color: #6c757d;
                }
            }
        }

        .ti_label {
            padding-bottom: 4vw;
        }
    }

    .com_box {
        margin-top: 2.66667vw;
        background: #fff;

        .pane {
            flex-shrink: 0;
            box-sizing: border-box;
            width: 100%;
            background: #fff;

            .teacher_tro {
                padding: 0 4vw;
                list-style: none;

                li {
                    display: flex;
                    line-height: 10.66667vw;
                    font-size: 3.46667vw;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: #8c8c8c;
                    padding-top: 2.66667vw;

                    span {
                        margin-left: 1.33333vw;
                        margin-right: 5.33333vw;
                    }

                    font {
                        padding-top: 1.33333vw;
                        line-height: 8vw;
                        flex: 1;
                    }
                }
            }
        }
    }

    .dv1 {
        padding-bottom: 50px;

        img {
            display: block;
            width: 40vw;
            // height: 34.4vw;
            margin: 10px auto 40px;
        }

        p {
            font-size: 3.73333vw;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: gray;
            line-height: 5.33333vw;
            text-align: center;
        }
    }

    .course_btn {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 1.17333rem;
        height: 11.73333vw;
        line-height: 1.17333rem;
        line-height: 11.73333vw;
        text-align: center;
        background: #eb6100;
        font-size: 0.45333rem;
        font-size: 4.53333vw;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #fff;
    }

    .van-tabs--line /deep/ .van-tabs__wrap {
        height: 80px;
    }

    .van-tabs--line /deep/ .van-tabs__wrap .van-tab {
        line-height: 80px;
        font-size: 30px;
    }

    .list1 {
        width: 85%;
        margin: 20px auto;
        padding: 40px 2.5%;
        border-radius: 10px;
        box-shadow: 0 0 4px 1px #eee;
    }

    .tracher_evaluate {
        width: 100%;
        background: #fff;

        .tracher_evaluate_uu {
            width: 100%;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;

            li {
                border: 1px solid #eb8f2f;
                color: #eb8f2f;
                width: 25%;
                text-align: center;
                line-height: 50px;
                font-size: 25px;
                border-radius: 5px;
                height: auto;
            }
        }

        .tracher_evaluate_uu2 {
            width: 97%;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;

            li {
                border: 1px solid #eb8f2f;
                color: #eb8f2f;
                width: 25%;
                text-align: center;
                line-height: 50px;
                font-size: 25px;
                border-radius: 5px;
                margin-top: 25px;
                height: auto;
            }
        }
    }

    .ti_label {
        width: 100%;
        display: flex;
        justify-content: space-around;

        span {
            display: inline-block;
            width: 19.2vw;
            height: 6.4vw;
            line-height: 6.4vw;
            background: #ffe4d3;
            border-radius: 3.2vw;
            font-size: 3.2vw;
            color: #ea7a2f;
            margin-right: 2.66667vw;
            margin-bottom: 2.66667vw;
            text-align: center;
            overflow: hidden;
        }
    }
</style>